A Bar chart capable of drilldown

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.drawing.text.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var ca = document.getElementById("cvs");
        var data           = [15,14,12,18,16,13];
        var data_drilldown = [];

        /**
        * The drilldown data - the order corresponds to that of the labels
        */
        data_drilldown.push([2,3,1,2,3,1,3]);
        data_drilldown.push([2,2,2,1,2,2,3]);
        data_drilldown.push([1,1,1,2,3,2,2]);
        data_drilldown.push([3,3,3,2,3,3,1]);
        data_drilldown.push([4,3,1,1,3,2,2]);
        data_drilldown.push([3,2,2,2,3,1,0]);

        var labels = ['John','Fred','Luis','Kevin','Lola','June']

        var bar = drawMainChart();
        
        /**
        * Draws the main chart
        */
        function drawMainChart ()
        {
            RGraph.reset(ca);

            var bar = new RGraph.Bar({
                id: 'cvs',
                data: data,
                options: {
                    labels: labels,
                    bevel: !RGraph.ISOLD,
                    title: 'The whole teams statistics for sales of widgets',
                    backgroundGridAutofitNumvlines: data.length,
                    strokestyle:'rgba(0,0,0,0)',
                    textAccessible: true,
                    shadow: true
                }
            }).fadeIn();


        
            /**
            * When a bar is clicked show a more detailed breakdown
            */
            bar.onclick = function (e, shape)
            {
                var obj = e.target.__object__;
                var ca  = obj.canvas;
                var idx = shape.index;



                /**
                * Slide the old bar out
                */
                obj.fadeOut(null, function ()
                {
                    RGraph.reset(ca);

                    var bar = new RGraph.Bar({
                        id: 'cvs',
                        data: data_drilldown[idx],
                        options: {
                            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                            bevel: true,
                            strokestyle: 'rgba(0,0,0,0)',
                            title: 'Specific statistics for: ' + labels[idx],
                            backgroundGridAutofitNumvlines: 7,
                            textAccessible: true
                        }
                    }).fadeIn();
                });
            }
            
            /**
            * The onmousemove event to change the cursor
            */
            bar.onmousemove = function (e, shape)
            {
                return true;
            }
            
            return bar;
        }
        
        document.getElementById("butBack").onclick = function (e)
        {
            var obj = ca.__object__;

            obj.fadeOut(null,function ()
            {
                var bar = drawMainChart();
            });
        }
    };
</script>